<template lang="pug">
  .hello
    h1 {{msg}}
    .box
      h3 Element-ui button
      el-button el-button
    .box
      h3 Mint-ui Button
      mt-button(type="primary" @click.native="handleClick") ActionSheet
      mt-actionsheet(:actions="actions" v-model="sheetVisible")
</template>

<script>
import { MessageBox } from 'mint-ui'
import { MessageBox as ElMessageBox } from 'element-ui'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      sheetVisible: false,
      actions: [{
        name: 'Message Box',
        method () {
          MessageBox({
            title: '提示框',
            message: 'Mint-ui MessageBox'
          })
        }
      }, {
        name: 'Alert',
        method () {
          ElMessageBox('Element-ui MessageBox', 'Alert')
        }
      }]
    }
  },
  methods: {
    handleClick () {
      this.sheetVisible = true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.box
  margin 40px 0 0

ul
  list-style-type none
  padding 0

li
  display inline-block
  margin 0 10px

a
  color #42b983
</style>
